<!DOCTYPE html>
<html lang="en" ng-app="leo">
<!-- ag-开头叫内置指令 -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
  <style>
  td{vertical-align: middle!important;}
  </style>
</head>

<body>
  <div class="container-fluid">
    <!-- <div ng-controller="one">
    <input type="text" ng-model="a">
    <div ng-bind="a"></div>
    <div ng-bind="aa"></div>
  </div>
  <div ng-controller="two">
    <input type="text" ng-model="a">
    <div ng-bind="a"></div>   
  </div> -->
    <!-- ng-repeat每次循环生成一个作用域 -->
    <!-- (key, value) in arrs -->
    <!-- value in arrs -->
    <!-- $index $first $middle $last $even $odd -->
    <!-- ng-repeat遍历数组用track by，防止数组内部出现重复项，(key, value) in arrs track by key -->
    <!-- <div ng-controller="phone">
    <ul ng-repeat="(arrskey,phoneobj) in arrs">
      <p ng-bind="phoneobj.product"></p>
      <li ng-repeat="(key,phonename) in phoneobj.type track by key">
        <span ng-bind="phonename"></span>
      </li>
    </ul>
  </div> -->
    <div ng-controller="jd">
      <table class="table table-condensed table-striped table-hover text-center" style="margin-top:50px">
        <thead>
          <tr>
            <td class="text-center">商品名称</td>
            <td class="text-center">商品价格</td>
            <td class="text-center">商品数量</td>
            <td class="text-center">小计</td>
            <td class="text-center">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="shopobj in shop track by $index">
            <td ng-bind="shopobj.product"></td>
            <td ng-bind="shopobj.price"></td>
            <td>
              <div class="form-inline">
                <input class="form-control" type="text" ng-model="shopobj.count">
              </div>
              
            </td>
            <td ng-bind="shopobj.total=shopobj.price*shopobj.count"></td>
            <td>
              <button class="btn btn-primary">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="node_modules/angular/angular.js"></script>
  <script>
  // angular模块化 ...
  var app = angular.module('leo', []);

  // $rootScope压缩会被重定参
  // app.run(function($rootScope){ 
  //   $rootScope.aa = "aaa";
  // });

  app.run(["$rootScope", function($rootScope) {
    $rootScope.aa = "aaa";
    $rootScope.total = 0;
  }]);

  app.controller("one", function($scope) {
    $scope.a = 1;
  });

  app.controller("two", function($scope) {
    $scope.a = 2;
  });

  app.controller("phone", ["$scope", function($scope) {
    $scope.arrs = [{
      product: "苹果",
      type: ["苹果1", "苹果2", "苹果3", "苹果3"]
    }, {
      product: "小米",
      type: ["小米1", "小米2", "小米3"]
    }, {
      product: "华为",
      type: ["华为1", "华为2", "华为3"]
    }];
  }]);

  app.controller("jd", ["$scope", function($scope) {
    $scope.shop = [{
      product: "商品1",
      count: 1,
      price: 10,
      total: 0
    }, {
      product: "商品2",
      count: 1,
      price: 21,
      total: 0
    }, {
      product: "商品3",
      count: 2,
      price: 33,
      total: 0
    }, {
      product: "商品4",
      count: 2,
      price: 15,
      total: 0
    }];
  }]);
  </script>
</body>

</html>